<template>
  <div class="prdp-outer">
    <div class="prdp-main">
      <!-- 头部标题栏 -->
      <div class="prdp-title-bar">
        <h2>张力设定表</h2>
      </div>
      
      <!-- 标签页 -->
      <div class="prdp-search-container">
        <el-tabs v-model="activeTab" class="rule-tabs" @tab-change="handleTabChange">
          <el-tab-pane label="规格静态张力设定表" name="specification" />
          <el-tab-pane label="历史卷实际平均张力表" name="history" />
        </el-tabs>
      </div>
      
      <!-- 表格 -->
      <div class="prdp-table-container">
        <el-table 
          :data="tableData" 
          border 
          style="width: 100%" 
          :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold', textAlign: 'center' }" 
          :cell-style="{ textAlign: 'center', color: '#333' }" 
          :scrollbar-always-on="true"
        >
          <el-table-column prop="no" label="序号" min-width="60" fixed />
          <el-table-column prop="ypClass" label="钢种分档" min-width="120" />
          <el-table-column prop="exthkClass" label="厚度分档[mm]" min-width="120" />
          <el-table-column prop="exwidthClass" label="宽度分档[mm]" min-width="120" />
          <el-table-column prop="preheatTensionAve" label="预热段张力" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.preheatTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="heat1TensionAve" label="加热1段张力" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.heat1TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="heat2TensionAve" label="加热2段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.heat2TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="soakTensionAve" label="均热段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.soakTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="rcsTensionAve" label="快冷段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.rcsTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="stage1TensionAve" label="时效1段张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.stage1TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="stage2TensionAve" label="时效2段张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.stage2TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="stage3TensionAve" label="时效3段张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.stage3TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="slowTensionAve" label="缓冷段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.slowTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="finalTensionAve" label="终冷段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.finalTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="cleanTensionAve" label="清洗段张力" min-width="120">
            <template #default="scope">
              {{ formatNumber(scope.row.cleanTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="enlooperTensionAve" label="入口活套张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.enlooperTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="midlooperTensionAve" label="中间活套张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.midlooperTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="exlooperTensionAve" label="出口活套张力" min-width="130">
            <template #default="scope">
              {{ formatNumber(scope.row.exlooperTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="por1TensionAve" label="1开卷机张力均值" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.por1TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="por2TensionAve" label="2开卷机张力均值" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.por2TensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="enspmTensionAve" label="平整机入口张力" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.enspmTensionAve) }}
            </template>
          </el-table-column>
          <el-table-column prop="exspmTensionAve" label="平整机出口张力" min-width="140">
            <template #default="scope">
              {{ formatNumber(scope.row.exspmTensionAve) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { zlgdhApi } from '/@/api/zlgdh/index';

const activeTab = ref('specification');

interface TensionData {
  no?: number;
  ypClass?: string;
  exthkClass?: string;
  exwidthClass?: string;
  preheatTensionAve?: string;
  heat1TensionAve?: string;
  heat2TensionAve?: string;
  soakTensionAve?: string;
  rcsTensionAve?: string;
  stage1TensionAve?: string;
  stage2TensionAve?: string;
  stage3TensionAve?: string;
  slowTensionAve?: string;
  finalTensionAve?: string;
  cleanTensionAve?: string;
  enlooperTensionAve?: string;
  midlooperTensionAve?: string;
  exlooperTensionAve?: string;
  por1TensionAve?: string;
  por2TensionAve?: string;
  enspmTensionAve?: string;
  exspmTensionAve?: string;
}

const tableData = ref<TensionData[]>([]);

// 格式化数字，保留两位小数
const formatNumber = (value: any): string => {
  if (value === null || value === undefined || value === '') {
    return '';
  }
  const num = parseFloat(value);
  if (isNaN(num)) {
    return value;
  }
  return num.toFixed(2);
};

// 页面加载时获取数据
onMounted(() => {
  loadTensionData();
});

// 加载张力设定表数据
const loadTensionData = async () => {
  try {
    console.log('开始加载张力设定表数据...');
    
    const response = await zlgdhApi.getTensionData({});
    console.log('张力设定表数据:', response);
    
          // 处理接口返回的数据
      if (response && response.data) {
        const data = response.data.data;
        // 如果返回的是数组，直接使用；如果是对象，需要进一步处理
        if (Array.isArray(data)) {
          tableData.value = data.map((item: any, index: number) => ({
            no: index + 1,
            ...item
          }));
        } else if (data.list && Array.isArray(data.list)) {
          tableData.value = data.list.map((item: any, index: number) => ({
            no: index + 1,
            ...item
          }));
        } else {
          console.log('数据结构:', data);
          tableData.value = [];
        }
      }
  } catch (error) {
    console.error('加载张力设定表数据失败:', error);
    tableData.value = [];
  }
};

// 监听标签页切换
const handleTabChange = (tabName: string) => {
  activeTab.value = tabName;
  loadTensionData();
};
</script>

<style scoped>
.prdp-outer {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to top, #eaf1fb 0%, #2c69e8 100%);
  overflow: hidden;
}
.prdp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px;
}
.prdp-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}
.el-table {
  flex: 1;
  height: 100% !important;
  min-height: 0;
  max-height: calc(100vh - 200px);
}
.el-table__body-wrapper {
  overflow-x: auto;
  overflow-y: auto;
}
.el-table__header-wrapper {
  overflow-x: auto;
}
.prdp-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.prdp-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.prdp-title-bar h2 {
  margin: 0;
  color: #333;
}

.prdp-status-indicators {
  display: flex;
  gap: 20px;
}

.prdp-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prdp-status-text {
  color: #333;
  font-size: 14px;
}

.prdp-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #67c23a;
  display: inline-block;
}

.prdp-search-container {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.prdp-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 等级指示器样式 */
.prdp-grade-indicator {
  display: flex;
  justify-content: center;
}

.prdp-grade-a {
  color: #67c23a;
  font-weight: bold;
}

.prdp-grade-b {
  color: #409eff;
  font-weight: bold;
}

.prdp-grade-c {
  color: #e6a23c;
  font-weight: bold;
}

.prdp-grade-d {
  color: #f56c6c;
  font-weight: bold;
}

.prdp-rate-indicator {
  text-align: center;
}
.rule-tabs {
  margin-bottom: 0;
}
</style>
